<template>
    <el-container class="survey-container">
        <el-header class="survey-header" height="auto">
            <div class="survey-title">{{detail.questionnaireTitle}}</div>
            <div class="survey-desc" v-html="detail.questionnaireNotice"></div>
        </el-header>
        <el-main class="survey-content">
            <template v-for="(question, idx) in questionList">
                <div class="survey-cell" :key="'question' + idx">
                    <div class="cell-title">
                        <span class="cell-index">{{getIndex(idx)}}</span>
                        <span>{{question.questionStemText}}</span>
                        <span class="cell-type">
                            <el-tag>{{question.questionTypeName}}</el-tag>
                        </span>
                    </div>
                    <div class="cell-content">
                        <!-- 单选 -->
                        <template v-if="question.questionType === 0">
                            <div v-for="(option) in question.questionOptionList">
                                <span class="optionLabel">{{option.optionLabel}}、</span>
                                <el-radio :key="option.optionId" v-model="question.userAnswer" :label="option.optionLabel">
                                    <span v-html="option.optionContent"></span>
                                </el-radio>
                            </div>
                        </template>
                        <!-- 多选 -->
                        <template v-else-if="question.questionType === 1">
                            <div v-for="(option) in question.questionOptionList">
                                <span class="optionLabel">{{option.optionLabel}}、</span>
                                <el-checkbox :key="option.optionId" v-model="option.checked" :label="option.optionLabel">
                                    <span v-html="option.optionContent"></span>
                                </el-checkbox>
                            </div>
                        </template>
                        <!-- 判断题 -->
                        <template v-else-if="question.questionType === 3">
                            <div
                                v-for="(option) in question.questionOptionList"
                                class="judge-option"
                                :class="{'checked': question.userAnswer === option.optionLabel}"
                                :key="option.optionId"
                                @click="judgeOption(option, idx)"
                            >
                                <span v-html="option.optionContent"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
            <!-- <div class="survey-cell">
        <div class="cell-title">
          <span class="cell-index">01</span>
          <span>您的生日是？</span>
          <span class="cell-type">
            <el-tag>单选</el-tag>
          </span>
        </div>
        <div class="cell-content">
          <el-radio
            v-model="radio"
            label="1"
          >男</el-radio>
          <el-radio
            v-model="radio"
            label="2"
          >女</el-radio>
        </div>
      </div>
      <div class="survey-cell">
        <div class="cell-title">
          <span class="cell-index">02</span>
          <span>您对学校的第一印象如何？</span>
          <span class="cell-type">
            <el-tag>多选</el-tag>
          </span>
        </div>
        <div class="cell-content">
          <el-checkbox
            v-model="checkbox"
            label="1"
          >很好</el-checkbox>
          <el-checkbox
            v-model="checkbox"
            label="2"
          >非常好</el-checkbox>
          <el-checkbox
            v-model="checkbox"
            label="3"
          >一般</el-checkbox>
          <el-checkbox
            v-model="checkbox"
            label="4"
          >无法描述</el-checkbox>
        </div>
      </div>
      <div class="survey-cell">
        <div class="cell-title">
          <span class="cell-index">03</span>
          <span>您对学校的第一印象如何？</span>
          <span class="cell-type">
            <el-tag>填空</el-tag>
          </span>
        </div>
        <div class="cell-content">
          <div class="section">你对学校的____方面比较____</div>
          <div class="cell-field">
            <label
              v-text="1"
              class="text_color_429688"
            ></label>
            <el-input
              type="textarea"
              autosize
              v-model="answer"
            ></el-input>
          </div>
          <div class="cell-field">
            <label
              v-text="2"
              class="text_color_429688"
            ></label>
            <el-input
              type="textarea"
              autosize
              v-model="answer"
            ></el-input>
          </div>
        </div>
            </div>-->
        </el-main>
        <el-footer>
            <div class="btn-row">
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </el-footer>
    </el-container>
</template>
<script>
function isEmptyAnswer(value) {
    if (typeof value === 'string') {
        return !value;
    } else {
        return !value.length;
    }
}
export default {
    name: 'SurveyDetail',
    data() {
        return {
            detail: {},
            title: '2019级新生入校调查',
            desc:
                '为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始吧为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始吧！',
            questionList: [],
            radio: '',
            checkbox: '',
            answer: '',
        };
    },
    methods: {
        fetchDetail(id) {
            utils.post(
                'questionnaire/QuestionnaireInstructions',
                {
                    questionnaireId: id,
                },
                (res) => {
                    if (res.success) {
                        const questionList = res.data.qqbList.map((element) => {
                            element.userAnswer = '';
                            if (element.questionType === 1) {
                                element.questionOptionList.forEach((option) => {
                                    option.checked = false;
                                });
                            }
                            return element;
                        });
                        this.detail = res.data;
                        this.questionList = questionList.map((question) => {
                            const questionOptionList = question.questionOptionList.sort((a, b) => a.optionLabel.charCodeAt(0) - b.optionLabel.charCodeAt(0));
                            return {
                                ...question,
                                questionOptionList: questionOptionList,
                            };
                        });
                    }
                }
            );
        },
        getIndex(value) {
            value = value + 1;
            return value > 9 ? value : '0' + value;
        },
        submit() {
            const params = {
                questionnaireId: this.detail.questionnaireId,
                submitData: [],
            };
            let hasEmptyAnswer = false;
            for (let i = 0, len = this.questionList.length; i < len; i++) {
                const question = this.questionList[i];
                if (question.questionType !== 1) {
                    params.submitData.push({
                        questionId: question.questionId,
                        userAnswer: question.userAnswer,
                    });
                } else {
                    const checkedAnswers = [];
                    for (let optionIndex = 0, optionLength = question.questionOptionList.length; optionIndex < optionLength; optionIndex++) {
                        const element = question.questionOptionList[optionIndex];
                        if (element.checked) {
                            checkedAnswers.push(element.optionLabel);
                        }
                    }
                    params.submitData.push({
                        questionId: question.questionId,
                        userAnswer: checkedAnswers,
                    });
                }
            }
            for (let i = 0, len = params.submitData.length; i < len; i++) {
                if (isEmptyAnswer(params.submitData[i].userAnswer)) {
                    hasEmptyAnswer = true;
                    break;
                }
            }
            if (hasEmptyAnswer) {
                this.$message({
                    message: '请填写完整问卷',
                    type: 'warning',
                });
            } else {
                if (process.env.NODE_ENV !== 'production') {
                    console.log('params:', params);
                }
                utils.post('questionnaire/SubmitQuestionnaire', params, (res) => {
                    if (res.success) {
                        this.$router.push({
                            path: '/LearningHome/OnlineExams/LearningServices'
                        });
                    }
                });
            }
        },
        judgeOption(option, index) {
            this.questionList[index].userAnswer = option.optionLabel;
        },
    },
    created() {
        this.$store.commit('updateActiveMenu', '/LearningHome/OnlineExams/LearningServices');
        this.fetchDetail(this.$route.query.tid);
    },
};
</script>
<style lang="less">
.survey-container {
    background-color: #ffffff;
    margin-top: 10px;
    .survey-header {
        display: flex;
        flex-direction: column;
        color: #ffffff;
        padding: 37px 60px 44px 60px;
        .survey-title {
            font-size: 30px;
            padding-bottom: 25px;
        }
        .survey-desc {
            font-size: 18px;
        }
    }
    .survey-content {
        margin-top: 67px;
        padding-left: 61px;
        .survey-cell {
            margin-bottom: 42px;
            .cell-title {
                font-size: 18px;
                color: #333333;
                .cell-index {
                    font-size: 30px;
                    margin-right: 19px;
                }
                .cell-type {
                    margin-left: 14px;
                    .el-tag {
                        height: 24px;
                        line-height: 24px;
                        color: #07806d;
                        background-color: #d1f4ee;
                        border: none;
                    }
                }
            }
            .cell-content {
                display: flex;
                flex-direction: column;
                margin-top: 26px;
                p {
                    display: inline;
                }
                .optionLabel {
                    margin-right: 10px;
                    display: inline-block;
                }
                .el-radio {
                    height: 35px;
                    line-height: 35px;
                    &.is-checked {
                        background-color: #e6fbf7;
                    }
                    .el-radio__inner {
                        border-color: #07806d;
                    }
                }
                .el-checkbox {
                    height: 35px;
                    line-height: 35px;
                    .el-checkbox__inner {
                        border-color: #07806d;
                    }
                }
                .cell-field {
                    display: flex;
                    flex-direction: row;
                    margin: 10px 0;
                    label {
                        border: 1px solid #07806d;
                        width: 14px;
                        height: 14px;
                        font-size: 12px;
                        border-radius: 50%;
                        padding: 3px 0 0 5px;
                    }
                    .el-textarea__inner {
                        border: none;
                        border-bottom: 1px solid #c3c3c3;
                    }
                }
                .judge-option {
                    padding: 10px 20px;
                    border: 1px solid #999999;
                    border-radius: 5px;
                    margin-bottom: 15px;
                    cursor: pointer;
                    &.checked {
                        color: #ffffff;
                        background-color: #07806d;
                        border: none;
                    }
                }
            }
        }
    }
    .btn-row {
        text-align: center;
        .el-button {
            width: 200px;
        }
    }
}
</style>
